<template>
  <div class="airCleaner">
    <div class="line">
      <div class="line_l">
        PM2.5
      </div>
      <span>{{ detailInfo.pm25 }}</span>
    </div>
    <div class="line" v-if="detailInfo.temp || detailInfo.temp == 0">
      <div class="line_l">
        温度
      </div>
      <span>{{ detailInfo.temp }}%</span>
    </div>
    <div class="line" v-if="detailInfo.humidity || detailInfo.humidity == 0">
      <div class="line_l">
        湿度
      </div>
      <span>{{ detailInfo.humidity }}%</span>
    </div>
    <div class="line" @click="toCloud">
      <div class="line_l">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_time%402x.png" alt="" />
        云定时
      </div>
      <van-icon name="arrow" color="#D6D6DC" />
    </div>
    <!-- <div class="line">
      <div class="line_l">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_xijun@2x.png" alt="" />
        杀菌
      </div>
      <van-switch v-model="detailInfo.uv" @change="settingMethods('uv', detailInfo.uv)" size="24px" active-color="#015EF5" inactive-color="#D6D6DC" />
    </div> -->
    <div class="line">
      <div class="line_l">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_fulizi@2x.png" alt="" />
        负离子
      </div>
      <van-switch v-model="detailInfo.anion" @change="settingMethods('anion', detailInfo.anion)" size="24px" active-color="#015EF5" inactive-color="#D6D6DC" />
    </div>
    <!-- v-if="detailInfo.status == 0" -->
    <div class="grade" >
      <div class="name">
        档位
      </div>
      <div class="grade_l">
        <!-- <van-slider v-model="value" @change="onChange" :step="20" bar-height="0.2813rem" /> -->
        <div class="grade_l_c" style="margin-bottom: 1.5rem;" ref="progress_Ref">
          <div class="grade_l_c_line" :class="[sliderind >= item ? 'dt' : 'da']" v-for="item in checkType" :key="item" @click="tapLine(item)"></div>
          <!-- <div class="slider" ref="slider_Ref" :style="{ left: sliderind > 0 ? sliderLeft + '%' : '0' }"></div> -->
        </div>
        <div class="grade_l_c">
          <div class="grade_l_c_txt" v-for="item in checkType" :key="item">{{item}}级</div>
        </div>
      </div>
    </div>
    <div class="grade">
      <div class="name">
        模式
        <div class="waterConsumption_top_r" @click="refreshMethod">
          刷新
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_update@2x.png" alt="" />
        </div>
      </div>
      <div class="modebox">
        <div class="mode">
          <div class="mode_t" @click="setStatus('status', 0)" :class="[detailInfo.status == 0 ? 'mode_t_Color' : '']">
            <img v-if="detailInfo.status == 0" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_hand2@2x.png" alt="" />
            <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_hand@2x.png" alt="" />
          </div>
          <div class="mode_b">手动模式</div>
        </div>
        <div class="mode">
          <div class="mode_t" @click="setStatus('status', 1)" :class="[detailInfo.status == 1 ? 'mode_t_Color' : '']">
            <img v-if="detailInfo.status == 1" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_circle2@2x.png" alt="" />
            <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_circle@2x.png" alt="" />
          </div>
          <div class="mode_b">自动模式</div>
        </div>
        <div class="mode">
          <div class="mode_t" @click="setStatus('status', 3)" :class="[detailInfo.status == 3 ? 'mode_t_Color' : '']">
            <img v-if="detailInfo.status == 3" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_night2@2x.png" alt="" />
            <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_night@2x.png" alt="" />
          </div>
          <div class="mode_b">睡眠模式</div>
        </div>
        <div class="mode">
          <div class="mode_t" @click="setStatus('status', 2)" :class="[detailInfo.status == 2 ? 'mode_t_Color' : '']">
            <img v-if="detailInfo.status == 2" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_lighting2@2x.png" alt="" />
            <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_lighting@2x.png" alt="" />
          </div>
          <div class="mode_b">极速模式</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["detailInfo", "machineId","machine_type"],
  data() {
    return {
      checked: false,
      value: "",
      sliderLeft: 16,
      sliderind: 0
    };
  },
  mounted() {
    // this.addListener();
  },
  watch: {
    detailInfo: {
      handler: function(nval, oval) {
        switch (nval.wind) {
          case 0:
            this.sliderind = 1;
            break;
          case 1:
            this.sliderind = 2;
            break;
          case 2:
            this.sliderind = 3;
            break;
          default:
            break;
        }
      },
      immediate: true
    }
  },
  computed:{
    checkType(){
      if(this.machine_type == 4){
        return 4
      }else{
        return 3
      }
    }
  },
  methods: {
    refreshMethod() {
      this.$emit("refresh");
    },
    setStatus(key, set) {
      this.detailInfo[key] = set;
      if (key == "status") {
        this.settingMethods("work");
      } else {
        this.settingMethods();
      }
    },
    tapLine(ind) {
      this.sliderind = ind;
      this.settingMethods("wind");
      this.sliderLeft = ind * 20 - 4;
    },
    toCloud() {
      this.$router.push(this.fun.getUrl("cloudTiming", { machine_id: this.machineId }));
    },
    // addListener() {
    //   const slider = this.$refs.slider_Ref;
    //   const progress = this.$refs.progress_Ref;
    //   let isClickSlider = false;
    //   let distance = 0; // 滑块与点击坐标的绝对距离
    // },
    settingMethods(types) {
      let json = {
        machine_id: this.machineId,
        change_type: types
      };
      // if (types == "uv") {
      //   json.uv = this.detailInfo.uv?1:0;
      // }
      if (types == "anion") {
        json.anion = this.detailInfo.anion;
      }
      if (types == "wind") {
        switch (this.sliderind) {
          case 1:
            json.wind = 0;
            break;
          case 2:
            json.wind = 1;
            break;
          case 3:
            json.wind = 2;
            break;
          case 4:
            json.wind = 3;
            break;
          default:
            break;
        }
      }
      if (types == "work") {
        json.work = this.detailInfo.status;
      }
      console.log(json);
      $http.post("plugin.drink-machine.frontend.air.change", json, "加载中...").then(res => {
        if (res.result == 1) {
          console.log(res);
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.airCleaner {
  margin: 0 0.75rem;
  padding-bottom: 2rem;

  .grade {
    padding: 0.88rem 0.75rem;
    border-radius: 0.75rem;
    background: #fff;

    .name {
      font-size: 0.94rem;
      font-weight: bold;
      text-align: left;
      margin-bottom: 1.3rem;
      display: flex;
      justify-content: space-between;
    }

    .modebox {
      display: flex;
      justify-content: space-between;

      .mode {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;

        .mode_t {
          width: 2.25rem;
          height: 2.25rem;
          background: #f0f0f1;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 1.5rem;
            height: 1.5rem;
          }
        }

        .mode_t_Color {
          background: #015ef5;
        }

        .mode_b {
          font-size: 0.75rem;
          margin-top: 0.6rem;
        }
      }
    }

    .grade_l_c {
      width: 100%;
      height: 0.2813rem;
      display: flex;
      align-items: center;
      position: relative;

      .slider {
        position: absolute;
        left: 0;
        top: -0.53rem;
        width: 1.06rem;
        height: 1.06rem;
        background: #fff;
        border-radius: 100%;
        box-shadow: 0 0.09rem 0.19rem 0.03rem rgba(0, 0, 0, 0.16);
      }

      .grade_l_c_line {
        flex: 1;
        height: 100%;
        margin-right: 0.19rem;
        border-radius: 0.94rem;
      }

      .da {
        background: #d6d6dc;
      }

      .dt {
        background: #015ef5;
      }

      .grade_l_c_line:last-child {
        margin-right: 0;
      }

      .grade_l_c_txt {
        flex: 1;
        text-align: center;
        font-size: 0.69rem;
        color: #aaaab3;
      }
    }
  }

  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.94em 0.81rem;
    margin-bottom: 0.5rem;

    .line_l {
      font-size: 0.81rem;
      display: flex;
      align-items: center;

      img {
        width: 1.13rem;
        height: 1.13rem;
        margin: 0;
        margin-right: 0.78rem;
      }
    }
  }

  .water_test {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.9rem 0.75rem;
    margin-bottom: 0.5rem;

    .datainfo {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .datainfo_r {
        font-size: 0.81rem;
        color: #aaaab3;
        display: flex;
        align-items: center;
      }

      .name {
        font-weight: bold;
        color: #00001c;
        font-size: 0.94rem;
        text-align: left;
      }
    }

    .reportBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .report {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;

        .report_t {
          font-size: 1rem;
          font-weight: bold;
          color: #00001c;
        }

        .report_b {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6e6e79;
          display: flex;
          align-items: center;

          .level {
            margin-left: 0.31rem;
            font-size: 0.63rem;
            padding: 0.22rem 0.38rem;
            background: #f0f0f1;
            border-radius: 0.94rem;
          }
        }
      }
    }
  }
}

.waterConsumption_top_r {
  display: flex;
  font-size: 0.75rem;
  font-weight: 400;
  color: #015ef5;
  padding: 0.5rem 0.94rem;
  box-sizing: border-box;
  background: #e5eefe;
  border-radius: 0.8rem;

  img {
    width: 1rem;
    height: 1rem;
    margin: 0;
  }
}
</style>
